﻿@page "/range-slider/vertical-orientation"

@using Syncfusion.Blazor.Inputs;
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of Slider component's orientation in the vertical direction. Drag the thumb over the bar for selecting the values between Min and Max.</p>
</SampleDescription>
<ActionDescription>
   <p>The Slider component allows to select a value or range of values in-between a Min and Max range, by dragging the thumb over the slider bar in vertical direction. Three types of Sliders in Vertical Orientation are:
      <ul><li><code>Default</code> - allows to select a single value.</li>
          <li><code>MinRange</code> – allows to select a single value, but highlights with a range selection from the Min value to the current handle value.</li>
          <li><code>Range</code> – allows to select a range of values with two handles, where the handles are connected with a range selection.</li>
      </ul>
      <p>The dragInterval is used to drag both handles using the range bar which is also applicable only to the Range Slider.</p>
      <p>In this demo, the Default, MinRange, and Range Slider types can be seen.</p>
    </p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div class="content-wrapper">
        <table class="slider_table">
            <tbody>
                <tr>
                    <td>
                        <div class="sliderwrap">
                            <SfSlider Orientation="@SliderOrientation.Vertical" @bind-Value="@Default" TValue="int">
                                <SliderTicks Placement="Placement.Before" LargeStep="20"></SliderTicks>
                                <SliderTooltip IsVisible="true"></SliderTooltip>
                            </SfSlider>
                        </div>
                    </td>
                    <td>
                        <div class="sliderwrap">
                            <SfSlider Type=SliderType.MinRange Orientation="@SliderOrientation.Vertical" @bind-Value="@MinRange" TValue="int">
                                <SliderTicks Placement="Placement.After" LargeStep="20"></SliderTicks>
                                <SliderTooltip IsVisible="true"></SliderTooltip>
                            </SfSlider>
                        </div>
                    </td>
                    <td>
                        <div class="sliderwrap">
                            <SfSlider Orientation="@SliderOrientation.Vertical" Type=SliderType.Range @bind-Value="@Range" TValue="int[]">
                                <SliderTicks Placement="Placement.Both" LargeStep="20"></SliderTicks>
                                <SliderTooltip IsVisible="true"></SliderTooltip>
                            </SfSlider>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@code{
    int Default = 30;
    int MinRange = 30;
    int[] Range = { 30, 70 };
}

<style>
    .content-wrapper {
        width: 80%;
        margin: 0 auto;
        min-width: 185px;
    }
    .sliderwrap {
        height: 375px;
        margin-top: 10px;
        width: 60%;
        margin: auto;
    }
    .e-bigger .content-wrapper {
        width: 80%;
    }
    .sliderwrap .e-lbl {
        display: block;
        font-size: 11px;
        font-weight: 500;
        margin-top: 15px;
        margin-left: -10px;
    }
    .sliderwrap:last-child .e-lbl {
        margin-left: -2px;
    }
    .slider_table td {
        text-align: center;
    }
    .slider_table {
        border: 0;
        width: 100%
    }
    .e-content-placeholder.e-slider.e-placeholder-slider {
        height: 375px;
        margin-top: 10px;
        width: 60%;
        margin: auto;
        background-image: none;
    }
    .e-content-placeholder.e-slider.e-placeholder-slider::after {
       animation: none;
       display: none;
    }
</style>
